<template>
  <div>
    <p />
    <button :class="{ active: selectedTable === 1 }" @click="showTable(1)">
      歌曲
    </button>
    <button :class="{ active: selectedTable === 2 }" @click="showTable(2)">
      专辑
    </button>
    <button :class="{ active: selectedTable === 3 }" @click="showTable(3)">
      乐队
    </button>
    <p />
    <!-- 歌曲 -->
    <div v-if="selectedTable === 1">
      <el-table :data="songs" border fit highlight-current-row>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="unFollow(scope.row.id, 2)"
            >
              取关
            </el-button>
          </template>
        </el-table-column>
        <el-table-column property="name" label="歌名"> </el-table-column>
        <el-table-column property="author" label="作者"> </el-table-column>
        <el-table-column property="albumName" label="专辑"> </el-table-column>
      </el-table>
    </div>
    <!-- 专辑 -->
    <div v-if="selectedTable === 2">
      <el-table :data="albums" border fit highlight-current-row>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="unFollow(scope.row.id, 1)"
            >
              取关
            </el-button>
          </template>
        </el-table-column>

        <el-table-column property="name" label="专辑名" width="80" />

        <el-table-column property="description" label="专辑描述" />
        <el-table-column property="bandName" label="乐队" width="110" />

        <el-table-column property="createTime" label="发布时间" width="160">
          <template slot-scope="scope">
            {{ new Date(scope.row.createTime).toLocaleDateString() }}
          </template>
        </el-table-column>
        <el-table-column property="score" label="评分" width="180">
        </el-table-column>

        <el-table-column label="其他" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="showScoring(scope.row.id)"
              style="font-size: 12px"
              >评分</el-button
            >
            <el-button
              type="text"
              @click="selectSongs(scope.row.id)"
              style="font-size: 12px"
              >歌曲</el-button
            >
          </template></el-table-column
        ></el-table
      >
    </div>
    <!-- 乐队 -->
    <div v-if="selectedTable === 3">
      <el-table :data="bands" border fit highlight-current-row>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="unFollow(scope.row.id, 0)"
            >
              取关
            </el-button>
          </template>
        </el-table-column>

        <el-table-column property="name" label="乐队名" width="120" />

        <el-table-column property="description" label="乐队描述" />
        <el-table-column property="memberCount" label="成员数量" width="80" />

        <el-table-column property="createTime" label="成立时间" width="160">
          <template slot-scope="scope">
            {{ new Date(scope.row.createTime).toLocaleDateString() }}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="selectMembers(scope.row.id)"
              >成员</el-button
            >
          </template></el-table-column
        ></el-table
      >
    </div>

    <!-- 成员列表窗口 -->
    <el-dialog
      title="乐队成员"
      :visible.sync="membersVisible"
      width="60%"
      height="80%"
    >
      <el-table :data="members">
        <!-- 表格的其他表单项代码 -->
        <el-table-column property="name" label="姓名"> </el-table-column>
        <el-table-column property="gender" label="性别">
          <template slot-scope="scope">
            <span v-if="scope.row.gender === 0">女</span>
            <span v-else>男</span>
          </template>
        </el-table-column>
        <el-table-column property="age" label="年龄"> </el-table-column>
        <el-table-column property="role" label="分工"> </el-table-column>
        <el-table-column property="joinTime" label="加入时间">
          <template slot-scope="scope">
            {{ new Date(scope.row.joinTime).toLocaleDateString() }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="membersVisible = false">取 消</el-button>
        <el-button type="primary" @click="membersVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 评分窗口 -->
    <el-dialog title="评分" :visible.sync="scoringVisible" width="30%">
      <el-input-number
        v-model="score.score"
        @change="handleChange"
        :min="1"
        :max="10"
        label="评分"
        :disabled="scoreDisable"
      ></el-input-number>
      <span slot="footer" class="dialog-footer">
        <el-button @click="scoringVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitScore" :disabled="scoreDisable"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 歌曲列表窗口 -->
    <el-dialog
      title="歌曲"
      :visible.sync="songsFormVisible"
      width="60%"
      height="80%"
    >
      <el-table :data="songs">
        <el-table-column property="name" label="歌名"> </el-table-column>
        <el-table-column property="author" label="作者"> </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="songsFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="songsFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
import { getToken } from "@/utils/auth";
import { getFollowed, follow } from "@/api/follow";
import { scoring, getScore } from "@/api/album";
import { selectByAlbumId } from "@/api/song";
import { selectMembers } from "@/api/band";
export default {
  data() {
    return {
      userId: -1,
      bands: [],
      albums: [],
      songs: [],
      selectedTable: 1, //控制哪个表格显示
      score: {
        //评分对象
        fanId: 0,
        albumId: 0,
        score: 0,
      },
      scoringVisible: false,
      songsFormVisible: false,
      scoreDisable: false,
      membersVisible: false,
      members: [],
    };
  },
  created() {
    //设置userId
    this.userId = getToken();
    //查询关注的歌曲、乐队、专辑
    this.getFollowSongs();
    this.getFollowAlbums();
    this.getFollowBands();
  },
  methods: {
    //查询关注的乐队
    getFollowBands() {
      getFollowed(this.userId, 0).then((res) => {
        // console.log(res.data.rows);
        this.bands = res.data.rows;
        // console.log("关注的乐队：{}", this.bands);
      });
    },
    //查询关注的专辑
    getFollowAlbums() {
      getFollowed(this.userId, 1).then((res) => {
        // console.log(res.data)
        this.albums = res.data.rows;
        // console.log(this.albums);
      });
    },
    //查询关注的歌曲
    getFollowSongs() {
      getFollowed(this.userId, 2).then((res) => {
        this.songs = res.data.rows;
      });
    },
    //取关
    unFollow(id, type) {
      this.$confirm("确定取关吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        follow(this.userId, type, id).then((res) => {
          this.$message.success("取关成功");
          //刷新
          if (type === 2) {
            this.getFollowSongs();
          } else if (type === 1) {
            this.getFollowAlbums();
          } else {
            this.getFollowBands();
          }
        });
      });
    },
    //获取成员列表
    selectMembers(id) {
      //根据乐队id查询乐队成员信息
      selectMembers(id).then((res) => {
        this.members = res.data.rows;
      });
      //打开对话框
      this.membersVisible = true;
    },
    //打分
    submitScore() {
      scoring(this.score)
        .then((res) => {
          this.$message.success("打分成功");
          this.scoringVisible = false;
          //刷新页面
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err.data);
        });
    },
    //评分窗口
    showScoring(id) {
      //获取用户id
      this.score.fanId = this.userId;
      this.score.albumId = id; //设置专辑id
      //查询该用户是否评过分，初始化为他评的分 | 1
      getScore(this.score.fanId, this.score.albumId).then((res) => {
        if (res.data.row != null) {
          //已经评过分，设置初始分，并禁用评分按钮
          this.score.score = res.data.row.score;
          this.scoreDisable = true;
          this.$message.info("您已评分");
        } else {
          this.score.score = 1;
          this.scoreDisable = false;
        }
      });

      this.scoringVisible = true;
    },
    //查找该专辑的歌曲
    selectSongs(id) {
      selectByAlbumId(this.userId, id).then((res) => {
        //打开对话框
        this.songsFormVisible = true;
        this.songs = res.data.rows;
      });
    },
    handleChange(value) {
      // console.log(value);
    },
    //更改哪个表格显示
    showTable(tableNumber) {
      this.selectedTable = tableNumber;
    },
  },
};
</script>
  
  <style>
button.active {
  background-color: rgb(13, 224, 94);
}
</style>
  